<!DOCTYPE html>
<html>

<head>
  <title>Listen</title>
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    html {
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      margin: 0;
      background-color: #002;
      background-image: radial-gradient(circle at center, #046, #002);
      color: #fff;
      font-family: Arial, sans-serif;
    }

    h2 {
      font-weight: 400;
    }

    .row {
      display: flex;
    }

    .block {
      text-align: center;
      margin: 15px;
    }

    .link {
      position: relative;
      display: inline-block;
      width: 115px;
      height: 115px;
      line-height: 115px;
      border-radius: 50%;
      font-size: 18px;
      color: #ddf;
      text-decoration: none;
      box-shadow: 0 0 10px 2px #0cf, 0 0 4px 2px #0cf inset, 0 0 16px #0cf inset;
      transition: transform 0.1s linear, box-shadow 0.15s linear;
    }

    .link:hover {
      box-shadow: 0 0 20px 2px #0cf, 0 0 4px 2px #0cf inset, 0 0 66px #0cf inset;
      transform: scale(1.1);
    }

    .link:before {
      content: "";
      position: absolute;
      top: 1.2em;
      left: 1.3em;
      width: 1.3em;
      height: 0.5em;
      background-color: rgba(255, 255, 255, .5);
      border-radius: 50%;
      transform: rotate(-35deg);
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Demo</h2>
    <div class="row">
      <div class="block"><a class="link" href="demo/listen-template/" target="_blank">模板引擎</a></div>
      <div class="block"><a class="link" href="demo/help/" target="_blank">类jQuery</a></div>
      <div class="block"><a class="link" href="demo/code-view/" target="_blank">高亮代码</a></div>
      <div class="block"><a class="link" href="demo/carousel/" target="_blank">旋转木马</a></div>
      <div class="block"><a class="link" href="demo/error/" target="_blank">错误展示</a></div>
      <div class="block"><a class="link" href="demo/fnline/" target="_blank">函数线</a></div>
      <div class="block"><a class="link" href="demo/search/" target="_blank">搜索算法</a></div>
    </div>
    <h2>工具</h2>
    <div class="row">
      <div class="block"><a class="link" href="tools/http_code.html" target="_blank">HTTP状态码</a></div>
      <div class="block"><a class="link" href="tools/ascii_code.html" target="_blank">ASCII码</a></div>
      <div class="block"><a class="link" href="tools/qrcode.html" target="_blank">二维码生成</a></div>
      <div class="block"><a class="link" href="tools/base64.html" target="_blank">图转base64</a></div>
      <div class="block"><a class="link" href="tools/loan.html" target="_blank">贷款计算</a></div>
      <div class="block"><a class="link" href="tools/simple_trandition.html" target="_blank">简繁转换</a></div>
      <div class="block"><a class="link" href="tools/markdown.html" target="_blank">Markdown</a></div>
    </div>
    <h2>游戏</h2>
    <div class="row">
      <div class="block"><a class="link" href="games/man_down/" target="_blank">男人下百层</a></div>
      <div class="block"><a class="link" href="games/tank_battle/" target="_blank">坦克大战</a></div>
      <div class="block"><a class="link" href="games/mine_sweeping/" target="_blank">扫雷</a></div>
      <div class="block"><a class="link" href="games/chess/" target="_blank">国际象棋</a></div>
      <div class="block"><a class="link" href="games/chinese_chess/" target="_blank">中国象棋</a></div>
      <div class="block"><a class="link" href="games/gomoku/" target="_blank">五子棋</a></div>
    </div>
    <h2>其它</h2>
    <div class="row">
      <div class="block"><a class="link" href="other/resume/" target="_blank">简历</a></div>
      <div class="block"><a class="link" href="other/jsnes/" target="_blank">模拟器</a></div>
      <div class="block"><a class="link"
          href="https://raw.githubusercontent.com/listen80/my-chrome-tools/master/app.crx">chrome扩展</a></div>
    </div>
  </div>
</body>

</html>
